<!-- 封装VanFieldSelectPicker单选组件 -->

<template>
  <div class="dh-field">
    <div class="van-hairline--bottom">
      <van-field v-model="resultLabel" v-bind="$attrs" readonly :is-link="checkLink" :input-align="inputAlign" @click="showPopu($attrs.disabled)" error-message-align="right"
        class="dh-cell">
        <template slot="right-icon" v-if="resultLabel&&supportClear">
          <img src="~@/assets/img/filedClear.png" alt="" @click.stop='clickClose' class="filedClear">
        </template>
      </van-field>
      <van-popup v-model="show" position="bottom">
        <van-field v-model="searchVal" placeholder="搜索" @input="search" v-if="isSearch" input-align="left" />
        <van-picker ref="selected" v-bind="$attrs" :default-index="defaultIndex" :columns="columnsData" show-toolbar @cancel="cancel" @confirm="onConfirm" @change="change"
          :value-key="this.option.label" />
      </van-popup>
    </div>
  </div>
</template>
<script>
export default {
  name: "VanFieldSelectPicker",
  model: {
    prop: "selectValue",
  },
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
    selectValue: {
      type: [String, Number],
      default: "",
    },
    supportClear: {
      type: Boolean,
      default: false,
    },
    option: {
      type: Object,
      default: function () {
        return { label: "label", value: "value" };
      },
    },
    isSearch: {
      type: Boolean,
      default: false,
    },
    offOption: {
      // 关闭option配置key-value;当数据是非集合的数组的时候，开启
      type: Boolean,
      default: false,
    },
    inputAlign: {
      type: String,
      default: 'right'
    },
    defaultIndex: {
      type: Number,
      default: 0
    },
  },
  computed: {
    resultLabel: {
      get() {
        // console.log(this.columns,'this.columns')
        if (this.columns) {
          const res = this.columns.filter((item) => {
            const data = this.offOption ? item : item[this.option.value];
            return data === this.resultValue;
          });
          let label = "";
          if (res.length) {
            label = this.offOption ? res[0] : res[0][this.option.label];
          }

          return label;
        }
      },
      set() {},
    },
    checkLink() {
      let isLink = false;
      if (this.supportClear) {
        if (this.$attrs.disabled === undefined && !this.resultLabel) {
          isLink = true;
        } else {
          isLink = false;
        }
      } else {
        if (this.$attrs.disabled === undefined) {
          isLink = true;
        }
      }
      return isLink;
    },
  },
  data() {
    return {
      show: false,
      searchVal: "",
      resultValue: this.selectValue,
      columnsData: [],
    };
  },
  methods: {
    clickClose(e) {
      this.resultValue = "";
      this.$emit("confirm", false);
    },
    search(val) {
      if (val) {
        this.columnsData = this.columnsData.filter((item) => {
          const data = this.offOption ? item : item[this.option.label];

          return data.indexOf(val) > -1;
        });
      } else {
        this.columnsData = JSON.parse(JSON.stringify(this.columns));
      }
    },
    // gogetIndexes(index){
    //  console.log(index,'123')
    // },
    onConfirm(value, index) {
      if (value) {
        const data = this.offOption ? value : value[this.option.value];
        this.resultValue = data;
        this.$emit("confirmtable", value, index, this.resultValue);
        this.$emit("confirm", value, index, this.resultValue);
      }
      this.show = !this.show;
    },
    change(val, index) {
      this.$emit("change", val, index, this.resultValue);
    },
    cancel(val, index) {
      this.show = !this.show;
      this.$emit("cancel", val, index, this.resultValue);
    },
    showPopu(disabled) {
      let data = {};
      this.$emit("prePopShow", (val) => {
        data = val;
      });
      console.log("阻止弹框弹出的返回结果", data);
      if (data === "notShow") {
        return false;
      }
      this.columnsData = JSON.parse(JSON.stringify(this.columns));
      this.resultValue = this.selectValue;
      if (disabled !== undefined && disabled !== false) {
        return false;
      } else {
        this.show = !this.show;
      }
    },
  },
  watch: {
    selectValue: function (newVal) {
      this.resultValue = newVal;
    },
    resultValue(val) {
      this.searchVal = "";
      this.columnsData = JSON.parse(JSON.stringify(this.columns));
      this.$emit("input", val);
    },
  },
};
</script>

<style lang="scss" scoped>
.dh-field {
  padding: 0 26px;
  background: #fff;
  .dh-cell.van-cell {
    padding: 20px 0 24px;
  }
  .dh-cell.van-cell--required::before {
    left: -8px;
  }
  .van-popup {
    border-radius: 20px 20px 0 0;
  }
}
.filedClear {
  width: 28px;
  height: 28px;
}
</style>
